<template>
  <div class="common-layout" style="height:100%">
    <el-container  style="height:100%">
      <el-aside style="background-color:#a16f56; height:100%; border-right:2px solid #fff;" :width="isCollapse ? '64px' : '200px' ">
	        <el-menu
	            active-text-color="#74ff65"
	            background-color="#a16f56"
				class="el-menu-vertical-demo"
				:collapse="isCollapse"
				:router="true"
				text-color="#fff"
				style="border-right-width: 0;"
	        > 
				
				<el-sub-menu index="2">
				  <template #title>
				    <el-icon><location /></el-icon>
				    <span>菜单</span>
				  </template>
								<el-menu-item
									v-for="(menu, index) in menu_data"
									:index="menu.path"
								>
								<!-- <component :is="item.menu_icon"" style="width: 20px; height:20px;"/> -->
								<span>{{menu.menu_name}}</span>
								</el-menu-item>
				</el-sub-menu>
	        </el-menu>	  
	  </el-aside>
      <el-container style="width:100% " >
        <el-header style="background-color: #a16f56; text-align: center; border-radius: 30px; margin-left:30px; margin-right:30px;" >			
			 <div id="" style=" margin-top:15px;  margin-right: 30px; float:right;">
				 <el-dropdown>
					<el-icon size="30px" color="#fff"><avatar /></el-icon>					
					<template #dropdown>
					  <el-dropdown-menu>
						<el-dropdown-item @click.native="loginOut">注销</el-dropdown-item>
						<el-dropdown-item>修改密码</el-dropdown-item>
					  </el-dropdown-menu>
					</template>
				  </el-dropdown>
				  <span class='user'>{{username}}</span>
			 </div>
			 <h2 style="color: #fff;  display:inline-block; margin-top:15px; ">宿舍管理系统</h2>
			 
		</el-header>
        <el-main>
			<router-view></router-view>
		</el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
	import { ref } from 'vue'
	// 按需引入 vue-router
	import {useRouter} from 'vue-router'	
	// 路由实例化
	const router = useRouter();
	//左边栏是否收起
	const isCollapse = ref(false)
	let username=ref() //用于右上角名称显示
	username.value=window.sessionStorage.getItem('loginUser')
	function loginOut(){
		router.push('/')
	}
	
	let menu_data=ref([])//恢复为菜单数组，用于动态菜单
	menu_data.value=JSON.parse(sessionStorage.getItem("menu_data"))
	//console.log(menu_data.value)

</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.user{
	font-size:20px;display: inline-block; line-height:40px;color:#fff;
}
</style>
